<template>
  <div class="page-box">
    <seachFrom ref="seachFrom"></seachFrom>
    <div class="table-box">
      <div v-if="otherInfo.ticketTypeMap" class="count-container">
        <div class="count-box">
          <ul class="count-sum">
            <li v-for="item in otherInfo.ticketTypeMap" :key="item.id" style="width:20%">
              <span>{{item.ticketTypeName}}:{{item.ticketTypeCount}}张</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="main-table">
        <div class="operation-box cenBet">
          <div class="operation-left cenLeft">
            <el-button @click="batchOperation(1)" type="success">通过</el-button>
            <el-button @click="batchOperation(9)" type="danger">不通过</el-button>
            <el-button type="warning" @click="deltedTicket()" icon="el-icon-delete">作废</el-button>
            <div v-if="sumPage" class="operation-tit" style=" margin-left: 16px;"> 共
              <span>{{sumPage}}</span> 张票</div>
            <div class="operation-tit" style=" margin-left: 16px;">
              <span style="color: #67c23a">{{otherInfo.isActiveCount || 0}}</span> 张已激活
            </div>
            <div class="operation-tit" style=" margin-left: 16px;">
              <span style="color:#f56c6c">{{otherInfo.unActiveCount || 0}}</span> 张未激活
            </div>
            <div class="operation-tit" style=" margin-left: 16px;">
              <span style="color:#e6a23c">{{otherInfo.unreviewedCount || 0}}</span> 张未审核
            </div>
          </div>
          <div class="operation-right">
            <el-button @click="$openPage('/allTicket/addticket')" icon="el-icon-circle-plus">发起赠票</el-button>
            <el-button v-if="sumPage" @click="exportTicketsByData()">导出</el-button>
            <el-button @click="$openPage('/allTicket/importicket')" icon="el-icon-download">导入国内票</el-button>
            <!-- <el-button :loading="listLoading" @click="export_file()" v-if="sumPage" icon="el-icon-download">导出要确认</el-button> -->
          </div>
        </div>
        <div class="table-content">
          <el-table :data="tableData" v-loading="tableLoading" element-loading-text="数据加载中..." border @selection-change="selectionChange">
            <el-table-column align="center" type="selection" width="60"></el-table-column>
            <el-table-column align="center" width="80" label="状态" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button type="text" style="color:#E6A23C;font-size:12px" v-if="scope.row.isActive == 0">未审核</el-button>
                <el-button type="text" style="color:#67C23A;font-size:12px" v-if="scope.row.isActive == 1">通过</el-button>
                <el-button type="text" style="color:#F56C6C;font-size:12px" v-if="scope.row.isActive == 9">未通过</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" width="200" label="订单信息">
              <template slot-scope="scope">
                <div>
                  <p>{{scope.row.source==4?"报名时间":'赠票时间'}}:{{$moment(scope.row.createDate)}}</p>
                  <p>订单号:{{scope.row.orderCode}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="用票人信息">
              <template slot-scope="scope">
                <div class="left-text">
                  <p>
                    <el-tag v-if="scope.row[item.attribute.filedCode]" style="margin-right:6px;margin-bottom:6px;" v-for="(item,index) of fieldList" :key="index" type="info">{{item.attribute.titName }}: {{scope.row[item.attribute.filedCode]}}</el-tag>
                  </p>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="门票名称">
              <template slot-scope="scope">
                <div>
                  <p>{{scope.row.tTypeName}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" width="100" label="渠道来源">
              <template slot-scope="scope">
                <div v-if="scope.row.source==3">
                  <p>赠票</p>
                </div>
                <div v-else>
                  <p>{{scope.row.channelName}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" width="100" label="是否录脸">
              <template slot-scope="scope">
                <div>
                  <p>{{scope.row.haveEnterFace?'已录脸':"未录脸"}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="备注" prop="detail">
              <template slot-scope="scope">
                <div>
                  {{scope.row.detail}}
                  <el-button @click="editDetail(scope.row)" icon="el-icon-edit" type="text"></el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" width="156" label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button type="text" @click=" $openPage('/allTicket/ticketDeile', scope.row)" size="mini">详情</el-button>
                <el-button v-if="!scope.row.isActive" @click="ifAdopt(1,scope.row)" type="text" style="color:#67C23A" size="mini">通过</el-button>
                <el-button v-if="!scope.row.isActive" @click="ifAdopt(9,scope.row)" type="text" style="color:#F56C6C" size="mini">不通过</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="sumPage" class="pagination-box">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="thisPage" :page-sizes="$pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="sumPage"></el-pagination>
        </div>
      </div>
    </div>

    <!-- 作废门票 -->
    <el-dialog title="作废" width="500px" :visible.sync="deltedTicketAlert">
      <div style=" width: 100%; height: auto;padding:10px 0px;color: #393F55;" class="per-box">
        <div>您确定将
          <span style="margin-left:10px" v-for="(item, index) in zuofei" :key="index">{{item.state===0? item.uName:item.bName}}</span>
          <span style="font-size: 30px;color: #F56C6C;"> {{zuofei.length}}</span>
          张门票作废吗
        </div>
      </div>
      <el-form :model="deltedTicketDetai">
        <el-form-item label="">
          <el-input type="textarea" :autosize="{ minRows: 2}" v-model="deltedTicketDetai.detail" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deltedTicketAlert = false">取消</el-button>
        <el-button @click="delTicketByTicketId()" type="primary">确定作废</el-button>
      </div>
    </el-dialog>

    <!-- 门票备注 -->
    <el-dialog title="备注" :visible.sync="editDetailAlert">
      <el-form :model="editDetai">
        <el-form-item label-width="100px" label="备注">
          <el-input type="textarea" maxlength="240" :autosize="{ minRows: 2}" v-model="editDetai.detail" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDetailAlert = false">取消</el-button>
        <el-button @click="updateTicketDetailByTicketId()" type="primary">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { exportTicketExcel } from "@/api/api.js";
import elementUIFun from "@/components/js/elementUIFun.js";
import servicePub from "@/api/servicePub";
import orderType from "@/components/rule/orderType";
import seachFrom from "@/components/seachFrom";
export default {
  components: {
    seachFrom
  },
  data() {
    return {
      selectList: [],
      tableLoading: false,
      tableData: [], //表格数据
      pageSize: 10, //每页多少条
      thisPage: 1, //当前页
      sumPage: 0, //一共有多少条
      otherInfo: {}, //其他信息
      orderType: orderType,
      zuofei: [], //作废列表
      deltedTicketAlert: false, //作废弹框
      deltedTicketDetai: {
        detail: "" //作废备注
      },
      editDetailAlert: false, //编辑备注弹框
      editDetai: {}, //编辑备注内容
      listLoading: false
    };
  },
  computed: {
    thisActivityId() {
      return this.$store.state.activityId.thisActivityId;
    },
    fieldList() {
      return this.$store.state.activityId.fieldList;
    },
    sourceList() {
      return this.$store.state.activityId.sourceList;
    }
  },
  watch: {
    thisActivityId(a, b) {
      this.initFun();
    }
  },
  mounted() {
    this.initFun();
  },
  methods: {
    async initFun() {
      this.getTableData();
    },
    async getTableData() {
      let subData = {
        activityId: this.$store.state.activityId.thisActivityId,
        start: (this.thisPage - 1) * this.pageSize,
        size: this.pageSize,
        isDel: 0, // 是否作废1作废 0未作废
        ...(this.$refs.seachFrom.subSearchFrom || {})
      };
      this.tableLoading = true;
      const { data = [] } = await servicePub.queryTicketsByData(subData);
      this.tableLoading = false;
      console.log(data);
      this.tableData = data.yunXiTickets || [];
      this.sumPage = data.totalCount || 0;
      this.otherInfo.ticketTypeMap = data.ticketTypeMap;
      this.otherInfo.isActiveCount = data.isActiveCount;
      this.otherInfo.unActiveCount = data.unActiveCount;
      this.otherInfo.unreviewedCount = data.unreviewedCount;
      // console.log(this.tableData);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.thisPage = val;
      this.getTableData();
    },
    //批量通过  不通过
    async batchOperation(status) {
      if (!this.selectList.length) {
        this.$message({
          message: "请至少选择一项",
          type: "warning"
        });
        return;
      }
      const confirm = await elementUIFun.$confirm(
        `此操作将进行${status == 1 ? "通过" : "不通过"}, 是否继续?`
      );
      if (!confirm) {
        return;
      }
      let successNum = 0;
      for (let i = 0; i < this.selectList.length; i++) {
        let pra = {
          ticketId: this.selectList[i].ticketId,
          isActive: status
        };
        const { success = false } = await servicePub.approveTicketById(pra);
        if (success) {
          successNum++;
        }
      }
      if (successNum == 0) {
        return;
      } else if (successNum == this.selectList.length) {
        this.$message({
          message: "审核成功",
          type: "success"
        });
      } else if (successNum < this.selectList.length) {
        this.$message({
          message: "部分审核成功",
          type: "success"
        });
      }
      this.getTableData();
    },
    //通过1  不通过2  isActive 9  未通过  isActive 1  通过
    async ifAdopt(status, scopeRow) {
      let pra = {
        ticketId: scopeRow.ticketId,
        isActive: status
      };
      const confirm = await elementUIFun.$confirm(
        `此操作将进行${status == 1 ? "通过" : "不通过"}, 是否继续?`
      );
      if (!confirm) {
        return;
      }
      this.viaMenu(pra);
    },
    async viaMenu(pra) {
      this.tableLoading = true;
      const { success = false } = await servicePub.approveTicketById(pra);
      this.tableLoading = false;
      if (success) {
        this.$message({
          message: "审核成功",
          type: "success"
        });
        this.getTableData();
      }
    },
    //选项发生变化调用
    selectionChange(item) {
      this.zuofei = item;
      this.selectList = item;
    },
    // 作废门票
    deltedTicket() {
      if (!this.zuofei.length) {
        this.$message({
          message: "请至少选择一项可作废的门票",
          type: "warning"
        });
        return;
      }
      this.deltedTicketAlert = true;
    },
    //点击弹框确定按钮
    async delTicketByTicketId() {
      if (!this.deltedTicketDetai.detail) {
        this.$message({
          message: "请输入备注",
          type: "warning"
        });
        return;
      }
      const confirm = await elementUIFun.$confirm(
        `此操作将进行作废, 是否继续?`
      );
      if (!confirm) {
        return;
      }
      let isAllSuccessNum = 0;
      for (let i = 0; i < this.zuofei.length; i++) {
        let subData = {
          activityId: this.$store.state.activityId.thisActivityId,
          orderId: this.zuofei[i].orderId,
          ticketIdList: [this.zuofei[i].ticketId],
          delTicketRemark: this.deltedTicketDetai.detail
        };
        const { success = false } = await servicePub.delTicketByTicketId(
          subData
        );
        if (success) {
          isAllSuccessNum++;
        }
      }

      if (isAllSuccessNum == 0) {
        return;
      } else if (isAllSuccessNum == this.zuofei.length) {
        this.$message({
          message: "作废成功！",
          type: "success"
        });
      } else {
        this.$message({
          message: "部分作废成功！",
          type: "success"
        });
      }
      this.deltedTicketAlert = false;
      this.getTableData();
    },
    // 编辑详情
    editDetail(propsRow) {
      this.editDetai = JSON.parse(JSON.stringify(propsRow));
      this.editDetailAlert = true;
    },
    async updateTicketDetailByTicketId() {
      if (!this.editDetai.detail) {
        this.$message({
          message: "请输入备注内容",
          type: "warning"
        });
        return;
      }
      let subData = {
        activityId: this.$store.state.activityId.thisActivityId,
        ticketId: this.editDetai.ticketId,
        detail: this.editDetai.detail
      };
      const { success = false } = await servicePub.updateTicketDetailByTicketId(
        subData
      );
      if (success) {
        this.editDetailAlert = false;
        this.$message({
          message: "备注成功！",
          type: "success"
        });
        this.getTableData();
      }
    },
    // 导出
    exportTicketsByData: async function() {
      let subData = {
        activityId: this.$store.state.activityId.thisActivityId,
        start: (this.thisPage - 1) * this.pageSize,
        size: this.pageSize,
        isDel: 0, // 是否作废1作废 0未作废
        ...(this.$refs.seachFrom.subSearchFrom || {})
      };
      let result = await servicePub.exportTicketsByData(subData);
      if (result.success) {
        console.log(result);
        this.$message({
          message: result.data,
          type: "success"
        });
      } else {
        this.$message({
          message: result.errorMsg,
          type: "success"
        });
      }
    },
    //导出表格数据
    export_file() {
      let params = {
        activityId: this.$store.state.activityId.thisActivityId
      };
      this.listLoading = true;
      exportTicketExcel({ params: params, responseType: "arraybuffer" })
        .then(res => {
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "票务信息导出.xlsx");
          document.body.appendChild(link);
          link.click();
          setTimeout(() => {
            this.$message({
              message: "导出成功",
              type: "success"
            });
          }, 6000);
          this.listLoading = false;
        })
        .catch(function(res) {});
    }
  }
};
</script>

<style lang="scss" scoped>
.main-form {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px 20px 0 20px;
}
.left-text {
  text-align: left;
}
.ticket-num {
  padding-right: 10px;
}
.count-box {
  margin-top: 10px;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  .count-sum {
    display: flex;
    flex-wrap: wrap;
    li {
      padding-right: 20px;
      margin-bottom: 10px;
    }
  }
}
.main-table {
  margin-top: 10px;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  .table-title {
    display: flex;
    justify-content: space-between;
  }
  .table-content {
    padding: 20px 0;
  }
  .pagination-container {
    text-align: right;
  }
}
.title-text {
  text-align: center;
  font-size: 18px;
  padding-bottom: 10px;
}
</style>

